<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .stage{
            perspective: 800px;
        }
        .container{
            width: 150px;
            height:200px;
            margin: 200px auto;
            position: relative;
            transform-style: preserve-3d;
            transition:5s;
        }
        .container .side{
            position: absolute;
            width: 150px;
            height: 150px;
            border:2px solid #0033FF;
            text-align: center;
            line-height: 150px;
        }
        .left{
            left:-152px;
            transform: translateZ(-75px) rotateY(90deg);
            transform-origin: right;
            background: linear-gradient(45deg, 
                    #fb3 25%, #58a 0, #58a 50%,
                    #fb3 0, #fb3 75%, #58a 0);
            background-size: 42.4px 42.4px;
        }
        .right{
            left:152px;
            transform: translateZ(-75px) rotateY(-90deg);
            transform-origin: left;
            background: #58a;
            background-image: linear-gradient(white 2px, transparent 0),
                            linear-gradient(90deg, white 2px, transparent 0),
                            linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
                            linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
            background-size: 50px 50px, 50px 50px,
                            10px 10px, 10px 10px;
        }
        .top{
            top:-152px;
            transform: translateZ(-75px) rotateX(-90deg);
            transform-origin: bottom;
            background: #655;
            background-image: radial-gradient(tan 20%, transparent 0),
                            radial-gradient(tan 20%, transparent 0);
            background-size: 30px 30px;
            background-position: 0 0, 15px 15px;
        }
        .bottom{
            top:152px;
            transform:translateZ(-75px)  rotateX(90deg);
            transform-origin: top;
            background: #eee;
            background-image: 
                linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
                linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
            background-position: 0 0, 15px 15px;
            background-size: 30px 30px;
        }
        .back{
            transform:translateZ(-75px);
            z-index:1;
            background: hsl(20, 40%, 90%);
            background-image: 
                linear-gradient(90deg, #fb3 11px, transparent 0),
                linear-gradient(90deg, #ab4 23px, transparent 0),
                linear-gradient(90deg, #655 23px, transparent 0);
            background-size: 83px 100%, 61px 100%, 41px 100%;
        }
        .front{
            z-index:2;
            transform:translateZ(75px);
            background-color: #655;
            background-image:
                radial-gradient(tan 15%, transparent 0),
                radial-gradient(tan 15%, transparent 0);
            background-size: 60px 60px;
            background-position: 0 0, 30px 30px;
        }
        .container:hover{
            transform: translateZ(-75px) rotateY(360deg);
        }
    </style>
</head>
<body>
<div class="stage">
    <div class="container">
        <div class="side front"></div>
        <div class="side back"></div>
        <div class="side left"></div>
        <div class="side right"></div>
        <div class="side top"></div>
        <div class="side bottom"></div>
    </div>
</div>
</body>
</html>